<template>
	<div class="listenReconizeSong">
		 <div class='free_nav'>
			<router-link to="/layout/found"><img src="../../../assets/icon-close45.png"></router-link>		
			<span>听歌识曲</span>
		</div>
		 <div class="comment_nav">
         	<span :class="{'active':selectSingle}" @click="SelectSingle">听歌识曲</span>
			<span :class="{'active':selectAlbum}" @click="SelectAlbum">哼歌识曲</span>
         </div>
		<!-- 。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。 -->
         <div class="listen_font">
         	<div>
         		<p>将手机靠近音源识别更准确</p>
         		<p>识别中...</p>
         	</div>
         	
         	<img src="../../../assets/2tinggeshiqu.png">
        
         </div>
	</div>
</template>
<script>
	export default {
		name:'listenReconizeSong',
		data(){
			return{
				selectSingle:true,
				selectAlbum:false
			}
		},
		methods:{
			SelectSingle(){
				this.selectSingle = true;
				this.selectAlbum = false;
				},
			SelectAlbum(){
				this.selectSingle = false;
				this.selectAlbum = true;
				
			}
			
		}
	}
</script>
<style scoped lang="Less">
.listenReconizeSong{
    overflow: hidden;
    width: 100%;
}
.free_nav{
	width: 100%;
	height: 88 / 100rem;
	position: fixed;
	top: 0;
	left: 0;
	background: url('../../../assets/daohang.png');
	background-size: 100%;
}

.free_nav img{
	width: 40 / 100rem;
	height: 40 / 100rem;
	display: inline-block;
    margin-left: 20 / 100rem;
    margin-top:  26 / 100rem;

}
.free_nav span{
	display: inline-block;
	margin-left: 238 / 100rem;
	font-size: 36 / 100rem;
	color: #ffffff;
}



.comment_nav{
	        display: flex;
			font-size: 30 / 100rem;
			padding-top: 32 / 100rem;
			padding-bottom: 10 / 100rem;
			text-align: center;
			margin-top: 88 / 100rem;
}
.comment_nav span{
	        flex:1;
			padding-bottom:10 / 100rem;
			color: #333;
			border-bottom: 4 / 100rem solid #fff;
			display: block;
}
.comment_nav .active{
			color: #c995f5;
			border-bottom: 4 / 100rem solid #c995f5;
			}

/*...................................................*/
.listen_font{
	width: 100%;
}
.listen_font div{
	width: 595 / 100rem;
	height: 85 / 100rem;
	margin: 0 auto;
	text-align: center;
	/*background-color: red;*/
	margin-top:  100 / 100rem;
	color: #333333;
	font-size: 24 / 100rem;
}
.listen_font div p:nth-child(2){
	margin-top: 35 / 100rem;
}
.listen_font img{
	display: inline-block;
	width: 480 / 100rem;
	height: 480 / 100rem;
	margin-top:150 / 100rem;
	margin-left: 100 / 100rem;
}
	
</style>